<template>
	<view class="bd1">
		<shortcut ref="shortcut" class="animated fadeIn" style="animation-duration: 500ms" :infos="iscard" :child="idx"
			v-show="isShowMenu" @closeMenu="closeMenu"></shortcut>
		<u-navbar title="可邻放映厅" title-width="300rpx" class="nav" :is-back="false">
			<view class="wddj" @click="goMessage">
				<u-icon class="t1" name="chat" size="42" v-show="!newtoast"></u-icon>
				<u-icon name="chat" size="42" color="red" class="t1 " v-show="newtoast"></u-icon>
				<i class="hasnewmess" v-show="newtoast"></i>
				<view class="t1">消息</view>
			</view>
			<view class="wddj wddj1" @click="back">
				<!-- <u-icon name="arrow-left" size="46"></u-icon> -->
			</view>
		</u-navbar>
		<view class="swipers bd1">
			<u-swiper :list="list4" mode="dot" indicator-pos="bottomCenter" @click="handleClick" :title="true"
				height="400" img-mode="aspectFit"></u-swiper>
		</view>
		<view class="down" v-if="activeList.length != 0">
			<template>
				<waterfallsFlow :list="activeList" @image-click="inprov" class="u-relative">
					<template v-slot="{item}">
						<!-- 此处添加插槽内容 -->

						<image src="../../static/img/top_icon.png" class="tops_icon" mode="aspectFit"
							v-show="item.isTop == 1"></image>
						<view class="cnt u-rela">
							<image src="../../static/img/logofinal.png" mode="aspectFit" class="u-abso playicon"
								style="width: 40rpx; height: 40rpx; border-radius: 0 50%" @click="gotoVideoPage(item)">
							</image>
							<view class="title u-m-t-10" @click="gotoVideoPage(item)">
								<!-- <u-icon name="thumb-up-fill" class="u-m-r-10" size="32" color="#e85456" v-show="item.isTop==1"></u-icon> -->
								<span class="">{{ item.videoTitle }}</span>
							</view>
							<view class="demo-tag">
								<view class="tagss" @click="gotoVideoPage(item)">
									<span class="u-line-1 tit">{{ item.tips }}</span>
								</view>
								<p class="icons" @click.stop="$noMultipleClicks(getVideoLikes, item)">
									<u-icon size="40" color="#e85456" name="heart-fill"
										style="animation-duration: 500ms" class="animated bounceIn"
										v-show="item.hasLikes == 1"></u-icon>
									<u-icon size="40" color="#e85456" name="heart" v-show="item.hasLikes != 1"></u-icon>
									<span class="u-m-l-10 u-font-sm" v-show="item.thumbs != 0">{{
                    item.thumbs
                  }}</span>
								</p>
								<p class="icons u-m-l-20" @click.stop="$noMultipleClicks(getCollection, item)">
									<u-icon size="40" color="#F8CB4F" name="star" v-show="item.hasCollection != 1">
									</u-icon>
									<u-icon size="40" color="#F8CB4F" name="star-fill" style="animation-duration: 200ms"
										class="animated bounceIn" v-show="item.hasCollection != 0">
									</u-icon>
									<span class="u-m-l-10 likeorcoll"
										v-show="item.collection != 0">{{ item.collection }}</span>
								</p>
							</view>
						</view>
					</template>
				</waterfallsFlow>
			</template>
		</view>
		<view class="down" v-else>
			<u-empty text="暂无记录" mode="list" class="empty_center_icon"></u-empty>
		</view>
	</view>
</template>

<script>
	import waterfallsFlow from "@/components/maramlee-waterfalls-flow/maramlee-waterfalls-flow.vue";
	export default {
		components: {
			waterfallsFlow,
		},
		data() {
			return {
				iscard: "", //底部卡片的状态值
				idx: "", //营养包标识
				isShowMenu: false, //底部弹窗的状态
				list4: [], //专题list
				activeList: [],
				noClick: true,
				page: {},
				newtoast: false, //消息提示
			};
		},
		onReachBottom() {
			console.log('已触底')
			console.log(this.page);
			if (this.page.isLastPage) return;
			this.getMoreListInfo(this.page.pageNum + 1);
		},
		onLoad() {
			this.getAllVideo(); //获取所有视频
			this.getAllSpecial(); //获取所有专题
			this.getIdx();
			setTimeout(function() {
				console.log("start pulldown");
			}, 1000);
			uni.startPullDownRefresh();
			this.getUnRead();
		},
		onShow() {
			this.isShowMenu = false;
			setTimeout((s) => {
				this.isReport();
				this.getIdx();
				this.getUnRead();
			}, 500);
		},
		onPullDownRefresh() {
			this.activeList = [];
			this.getAllVideo(); //获取所有视频
			this.getAllSpecial(); //获取所有专题
			this.getUnRead(); //获取消息
			this.getIdx();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		mounted() {
			uni.onTabBarMidButtonTap((s) => {
				this.isShowMenu = !this.isShowMenu;
			});
		},
		methods: {
			getUnRead() { //获取新的未读评论
				this.config
					.get("/projectionHall/getAllComment", {
						type: "unRead",
					})
					.then((res) => {
						console.log(res);
						console.log(Boolean(res.data.data));
						if (res.data.data) {
							this.newtoast = true;
						} else {
							this.newtoast = false;
						}
					});
			},
			goMessage() {
				uni.navigateTo({
					url: "./message_page",
				});
			},
			inprov: function(item) {
				//子触父事件
				this.gotoVideoPage(item);
			},
			//获取所有专题
			getAllSpecial() {
				this.config.get("/projectionHall/getSpecial").then((res) => {
					console.log(res.data);
					const resarr = []
					for (let i = 0; i < res.data.data.length; i++) {
						resarr[i] = {
							image: res.data.data[i].imgUrl || "",
							title: res.data.data[i].specialName,
							id: res.data.data[i].id,
						}
					}
					console.log(resarr)
					this.list4 = resarr
					this.list4.length = res.data.data.length;
				});
			},
			//获取所有视频
			getAllVideo() {
				this.config
					.get("/projectionHall/getAllVideoList", {
						pageNum: "1",
						pageSize: "10",
					})
					.then((res) => {
						console.log(res);
						if (res.data.code === 200) {
							this.page = res.data.data;
							let resData = res.data.data.list || [];
							this.activeList = [];
							this.activeList.push(...resData)
						} else {
							if (res.data.code == "-201") {
								self.config.handleError(res.data);
							} else {
								uni.showToast({
									title: self.config.handleError(res.data),
									icon: "none",
								});
							}
						}
					});
			},
			getMoreListInfo(pageNumber) {
				this.loadtype = true;
				// uni.showLoading({title: '加载中',mask: true});
				let self = this;
				this.config
					.get("/projectionHall/getAllVideoList", {
						pageNum: pageNumber ? pageNumber : "1",
						pageSize: "10",
					})
					.then((res) => {
						// uni.hideLoading();
						if (res.data.code === 200) {
							this.page = res.data.data;
							let resData = res.data.data.list || [];
							this.activeList.push(...resData)
						} else {
							if (res.data.code == "-201") {
								self.config.handleError(res.data);
							} else {
								uni.showToast({
									title: self.config.handleError(res.data),
									icon: "none",
								});
							}
						}
					});
			},
			gotoVideoPage(v) {
				console.log(v)
				const {
					id,
					videoTitle,
					videoUrl,
					createTime,
					hasLikes,
					hasCollection
				} =
				v; //拿需要的数据
				// uni.navigateTo({
				// 	url: `videoinfo_page?id=${id}&vTitle=${videoTitle}&vUrl=${videoUrl}&cTime=${createTime}&likenum=${hasLikes}&collect=${hasCollection}`
				// })
				uni.navigateTo({
					url: `videoinfo_page?obj=${encodeURIComponent(JSON.stringify(v))}`,
				});
			},
			//视频点赞
			getVideoLikes(obj) {
				this.config
					.get("/projectionHall/giveVideoLikes", {
						videoId: obj.id,
					})
					.then((res) => {
						let idx = obj.index;
						const atobj = this.activeList[idx];
						atobj.hasLikes = !atobj.hasLikes;
						if (atobj.hasLikes == false && atobj.thumbs > 0) {
							atobj.thumbs = atobj.thumbs - 1;
						} else {
							atobj.thumbs = atobj.thumbs + 1;
						}
					});
			},
			//视频收藏
			getCollection(obj) {
				this.config
					.get("/projectionHall/giveVideoCollection", {
						videoId: obj.id,
					})
					.then((res) => {
						let idx = obj.index;
						const atobj = this.activeList[idx];
						atobj.hasCollection = !atobj.hasCollection;
						if (atobj.hasCollection == false && atobj.collection > 0) {
							atobj.collection = atobj.collection - 1;
						} else {
							atobj.collection = atobj.collection + 1;
						}
					});
			},
			//关闭弹窗
			closeMenu(msg) {
				this.isShowMenu = false;
			},
			isReport() {
				let self = this;
				this.config
					.get("/initUser/pdCommonIsArchives", {})
					.then(({
						data: {
							data
						}
					}) => {
						this.iscard = data;
					});
			},
			getIdx() {
				//营养包
				this.config.get("/flow/getUserNutrition").then((res) => {
					this.idx = res.data.data;
				});
			},
			//————————————底部卡片的函数👆—————————————
			handleClick(index) {
				const {
					id,
					title
				} = this.list4[index];
				uni.navigateTo({
					url: `zhuanti_page?title=${title}&id=${id}`,
				});
			},
		},
	};
</script>

<style>
	page {
		background-color: #fafafa;
	}
</style>
<style lang="scss" scoped>
	.title {
		text-align: left;
	}

	.cnt {
		width: 100%;
		text-align: center;

		.playicon {
			left: -3px;
			bottom: 103%;
		}
	}

	uni-image.tops_icon {
		width: 38px;
		height: 31px;
		position: absolute;
		right: 0;
		top: 0;
	}

	.nav {
		position: relative;
	}

	.wddj {
		position: absolute;
		top: 9rpx;
		right: 22rpx;
		text-align: center;
		zoom: 0.9;
		z-index: 1000;

		.hasnewmess {
			position: absolute;
			display: inline-block;
			width: 20rpx;
			height: 20rpx;
			border-radius: 50%;
			right: -1px;
			background-color: red;

		}
	}

	.wddj1 {
		left: 20rpx;
		zoom: 1;
		top: 10px;
		width: 10px;
	}

	.tops {
		position: relative;
	}

	.der {
		position: absolute;
		top: 9rpx;
		right: 25rpx;
		text-align: center;
		zoom: 0.9;
		z-index: 1000;
	}

	.swipers {
		width: 100%;
		background-color: white;
		position: fixed;
		z-index: 99;
	}

	.down {
		margin-top: 420rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
		width: 100%;
		justify-content: space-between;
		align-items: center;

		.tagss {
			font-size: 20rpx;
			display: inline-flex;
			align-items: center;
			width: 80%;
			color: #757575;

			.tit {
				width: 160rpx;
				text-align: left;
			}
		}

		.icons {
			display: inline-flex;
			align-items: center;
			transform: scale(1);
		}
	}
</style>
<style scoped>
	@media (prefers-color-scheme: closedark) {
		.bd {
			background-color: #1b1c1e !important;
		}

		.bd1 {
			background-color: #38383c !important;
		}

		.t1 {
			color: #ccc !important;
		}
	}
</style>
